<template>
  <div class="loginPage">
    <div class="loginWrap">
      <div class="loginZoom"
           v-if=show>
        <div class="loginTitle">
          <p> “守纪律、讲规矩”党规党章党纪知识</p>
          <p class="">线上答题活动</p>
        </div>

        <div class="loginArea">
          <form>
            <div class="loginInput">
              <input type="digit"
                     placeholder="输入手机号"
                     class="input"
                     id="telPhoneCheck"
                     v-model="text">
            </div>
            <div class="loginInput">
              <input type="text"
                     class="input"
                     placeholder="输入真实姓名"
                     id="telPhoneCheck"
                     v-model="realName">
            </div>
            <div class="loginInput picker">
              <picker mode="selector"
                      @change="bindMultiPickerChange"
                      @cancel="cancelPicker"
                      :range="multiArray2"
                      :value="multiIndex2">
                {{multiIndex2}}
              </picker>

            </div>
            <div class="loginInput isparty">
              <radio-group class="radio-group"
                           @change="radioChange">
                <label class="radio">
                  <radio value="1"
                         checked/>党员
                </label>
                <label class="radio">
                  <radio value="0" />非党员
                </label>
              </radio-group>
            </div>
            <div class="loginBtn">
              <input type="button"
                     class="input"
                     value="提交"
                     @click.stop="commit"
                     id="loginBtn">
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="hideContent"
         v-if="hideContent">
      <div class="marginAuto">
        <p class="personInfo">
          <span>个人信息</span>
        </p>
        <p>
          <span>电话号码:</span>
          {{text}}
        </p>
        <p>
          <span>真实姓名:</span>
          {{realName}}
        </p>
        <p>
          <span>公司名称:</span>
          {{multiIndex2}}
        </p>
        <p>
          <span>是否党员:</span>
          {{menberArray[isMenber]}}
        </p>
        <div class="button">
          <span @click.stop="nextStep"
                class="confrim">确认</span>
          <span @click.stop="modify"
                class="modify"> 修改</span>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      show: true,
      text: '',
      telError: false,
      hideContent: false,
      inputType: 'password',
      password: '',
      showPassword: false,
      passwordError: false,
      info: 'https://dati.co-links.com/static/xadmin/images/info.jpg',
      showModel: true,
      message: 0,
      showPicker: false,
      multiArray2: [],
      multiIndex2: '请选择相关企业',
      selectNum1: 0,
      isMenber: '1',
      realName: '',
      menberArray: ['非党员', '党员'],
      index: 0,
      idArray: []

    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    radioChange (e) {
      console.log(e.mp.detail.value)
      this.isMenber = e.mp.detail.value
      console.log(this.isMenber)
    },
    clickInput () {
      this.showPicker = !this.showPicker
    },
    nextStep () {
      let that = this
      console.log(wx.getStorageSync('openId'))
      console.log(that.idArray[that.selectNum1])
      wx.setStorageSync('actual_name', that.realName)
      this.$http.post('https://dati.co-links.com/user/check_code/', {
        phone: that.text,
        openid: wx.getStorageSync('openId'),
        code: '0000',
        nickName: that.userInfo.nickName,
        avatarUrl: that.userInfo.avatarUrl,
        actual_name: that.realName,
        is_partymember: that.isMenber,
        org: that.idArray[that.selectNum1]
      }).then((res) => {
        console.log(res)
        if (res.data.code === '0000') {
          console.log(res.data.data.user_id)
          that.setUserInfo({
            user_id: res.data.data.user_id,
            name: that.realName
          })
          wx.setStorageSync('user_id', res.data.data.user_id)
          clearInterval(that.timer)
          wx.reLaunch({
            url: '../exam/main'
          })
        } else {
          wx.showModal({
            title: '提示',
            content: res.data.message,
            showCancel: false
          })
        }
      })
    },
    commit () {
      if (!this.checktel(this.text)) {
        wx.showModal({
          content: '请填写正确的电话号码',
          title: '提示',
          showCancel: false
        })
        return false
      }
      if (!this.realName) {
        wx.showModal({
          content: '请填写真实姓名',
          title: '提示',
          showCancel: false
        })
        return false
      }
      if (this.multiIndex2 === '请选择相关企业') {
        wx.showModal({
          content: '请选择相关企业',
          title: '提示',
          showCancel: false
        })
        return false
      }
      this.hideContent = true
    },
    modify () {
      this.hideContent = false
    },
    checktel (str) {
      var reg2 = /^(((13|14|15|18|17|16|19)\d{9}))$/
      if (!reg2.test(str)) {
        return false
      }
      return true
    },
    focus () {
      this.telError = false
    },
    focusPass () {
      this.passwordError = true
    },
    bindMultiPickerChange (e) {
      this.multiIndex2 = this.multiArray2[e.mp.detail.value]
      this.selectNum1 = e.mp.detail.value
      // console.log(this.selectNum1)
    }
  },
  mounted () {
    console.log(this.userInfo)
  },
  onReady () {
    let that = this
    this.$http.get('https://dati.co-links.com/user/org/')
      .then((res) => {
        console.log(res.data.data.orgs_list)
        // that.multiArray2 = res.data.data.orgs_list
        if (res.data.data.orgs_list) {
          for (let i in res.data.data.orgs_list) {
            that.multiArray2[i] = res.data.data.orgs_list[i].org_name
            that.idArray[i] = res.data.data.orgs_list[i].id
          }
        }
      })
  }
}
</script>
<style>
page {
  width: 100%;
  height: 100%;
}
.isparty {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.model {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
  z-index: 50;
}
.loginPage {
  width: 100%;
  height: 100%;
}
.loginWrap {
  width: 100%;
  height: 100%;
  /* background-image: url("../images/login.jpg"); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.loginWrap .loginZoom,
.loginWrap .fillPassword {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.radio {
  margin-right: 30rpx;
}
.loginTitle {
  font-size: 0.38rem;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 1.4rem 0;
  /* background: #00cc75; */
  /* border-bottom-left-radius: 90rpx;
  border-bottom-right-radius: 90rpx; */
  background-image: url(https://dati.co-links.com/static/xadmin/images/banner.png);
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: -1;
  background-size: 100% 100%;
}
.loginTitle:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
}
.loginArea {
  margin: 0 0.76rem;
  padding: 50rpx 0;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 5rpx 5rpx #ccc;
}
.loginInput {
  position: relative;
  height: 0.8rem;
  margin-top: 0.3rem;
}
.loginInput radio-group {
  margin-left: 50rpx;
}

.loginArea {
  margin-top: -55rpx;
}
.loginArea .input,
.loginArea picker {
  margin-left: 50rpx;
  margin-right: 50rpx;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.3rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  font-size: 0.34rem;
  border: none;
  outline: none;
  line-height: 80rpx;
  color: #999;
}
.loginInput input,
.loginInput picker {
  /* background: rgba(255, 255, 255, 0.9);
   */
  background: #eee;
  /* box-shadow: 0 3px 5px #ccc; */
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
  font-size: 0.3rem;
}
.loginArea picker {
  font-size: 28rpx;
}

.loginBtn {
  width: 100%;
  height: 0.8rem;
  margin-top: 0.3rem;
}
.loginBtn input {
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.34rem;
  color: #ffffff;
  background: #3bc367;
  /* box-shadow: 0 3px 5px #ccc; */
}

.loginTips {
  text-align: center;
  font-size: 0.24rem;
  color: #000;
  margin-top: 0.2rem;
}

.code {
  text-align: center;
  font-size: 0.24rem;
  color: white;
  padding-top: 0.13rem;
}
.sendCode {
  font-weight: normal;
}
.loginArea .codeArea {
  text-align: center;
}
.loginArea .codeArea input {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.13rem;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0 0.1rem;
}
.codeerrorTips {
  text-align: center;
  padding-top: 0.2rem;
  display: none;
}
.codeerrorTips span {
  display: inline-block;
  position: relative;
  font-size: 0.24rem;
  color: white;
  padding-left: 0.5rem;
}
.codeerrorTips span:before {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  margin-top: -0.15rem;
  width: 0.3rem;
  height: 0.3rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/errorTips.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.3rem 0.3rem;
}
.codeerrorTips span.noTips:before {
  width: 0;
}
.setPassword {
  display: none;
}
.fillPassword {
  /* display: none; */
}
.forgetPassword {
  font-size: 0.24rem;
  color: white;
  text-align: center;
  padding-top: 0.2rem;
}
.forgetPassword a {
  color: #000;
}
button[disabled] {
  color: white;
}
button[disabled]:not([type]) {
  color: rgba(255, 255, 255, 0.7);
  background-color: #48c4a0;
}
.hideContent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 7;
}
.marginAuto {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 660rpx;
  height: 450rpx;
  background: white;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 76rpx;
  line-height: 76rpx;
  font-size: 32rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  border-top: 1px solid #d5d5d6;
}
.button span {
  color: #353535;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  text-align: center;
}
.button span:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid #d5d5d6;
  color: #d5d5d6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
.button span.confrim {
  color: #3bc367;
}
.marginAuto p {
  font-size: 32rpx;
  padding: 8rpx 0;
  margin: 6rpx 20rpx;
  color: #999;
  line-height: 46rpx;
}
.marginAuto p span {
  /* margin: 0 20rpx; */
}
.button span {
  font-size: 34rpx;
}

.marginAuto .personInfo {
  text-align: center;
  font-size: 40rpx;
  color: #333;
}
.pickerView {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 300px;
  z-index: 999;
}
.pickerView picker-view-column {
  width: 100%;
  height: 100%;
  display: block;
}
.picker {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
</style>
